<template>
  <div class='chargeDialog-warp' ref="chargeDialogWarp">
    <a-modal :centered="true" v-model:open="state.showDialog" :closable="false" title="充值" @ok="handleOk" :getContainer="chargeDialogWarp">
      <a-form ref="formRef" :model="state.form">
          <a-form-item label="充值金额" name="code">
            <a-input-number v-model:value="state.form.amount" style="width: 100%"/>
          </a-form-item>
          <a-form-item label="充值类型" name="protoType" >
            <a-select ref="select" v-model:value="state.form.cashType">
              <a-select-option :value="1">现金</a-select-option>
              <a-select-option :value="2">津贴</a-select-option>
              <a-select-option :value="3">补贴</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
    </a-modal>
  </div>
</template>

<script lang='ts' setup>
import { usePosWalletChargeApi } from '@/api';
import { message } from 'ant-design-vue';
import { reactive, ref } from 'vue';

const chargeDialogWarp = ref()
const useContent = () => {
  return {
    code: "",
    amount: undefined,
    cashType: 1,
  }
}

const emit = defineEmits(['success'])

const state = reactive({
  showDialog: false,
  row: undefined,
  form: useContent()
});

// 打开弹窗
const openDialog = (row: any) => {
  state.showDialog = true
  state.form.code = row.code
};

const handleOk = async () => {
  await usePosWalletChargeApi(state.form)
  message.success("操作成功",2);
  emit('success')
    setTimeout(() => {
      state.showDialog = false
      state.form = useContent()
    }, 2300)
};

defineExpose({
  openDialog,
});
</script>
<style scoped lang='less'>
.chargeDialog-warp{
  :deep(.ant-form-item){
    margin-bottom: 12px;
  }
  :deep(.ant-form-item:nth-last-child(1)){
    margin-bottom: 36px;
  }
}
</style>